<template>
  <div class="box-container accessResource">
    <div class="tabs flex-row">
      <div class="tab" :class="tab == i? 'active': ''" v-for="(item,i) in tabList" :key="i" @click="tabClick(item, i)">{{ item.name }}</div>
    </div>
    <iframe class="iframe" :src="iframeSrc"></iframe>
  </div>
</template>
<script>

export default {
  name: "",
  components: {},
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tab: 0,
      // tabList:[
      //   // http://172.16.72.109/dist/#/lab/newLab/management
      //   //'http://iot.dev.cloudiip.local/dist/#/lab/newLab/management'
      //   { name: '模型管理', ip:'http://172.16.72.109/dist/#/lab/newLab/management' },
      //   { name: '算子中心', ip:'http://172.16.72.109/dist/#/lab/newLab/algorithm' },
      //   { name: '函数中心', ip:'http://172.16.72.109/dist/#/lab/newLab/subprocess' }
      // ],
      // iframeSrc:'http://172.16.72.109/dist/#/lab/newLab/management',

      tabList:[
        // http://172.16.72.109/dist/#/lab/newLab/management
        //'http://iot.dev.cloudiip.local/dist/#/lab/newLab/management'
        { name: '模型管理', ip:process.env.VUE_APP_BASE_API_labIP+'/dist/#/lab/newLab/management' },
        { name: '算子中心', ip:process.env.VUE_APP_BASE_API_labIP+'/dist/#/lab/newLab/algorithm' },
        { name: '函数中心', ip:process.env.VUE_APP_BASE_API_labIP+'/dist/#/lab/newLab/subprocess' }
      ],
      iframeSrc:process.env.VUE_APP_BASE_API_labIP+'/dist/#/lab/newLab/management',
    };
  },
  methods: {
    tabClick(item, n){
      this.tab = n;
      this.iframeSrc = item.ip;
    }
  },
  created() {
    // this.tabClick(0);
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.accessResource {
  height: calc(100vh - 84px);
  // background-color: #fff;
  // width: 100%;
  // height: 100%;
  .tabs{
    margin:0 0 10px ;
    background-color: #fff;
    .tab{
      color: #c0c4cc;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      padding: 7px 15px;
      font-size: 12px;
      margin: 0 5px;
      cursor: pointer;
    }
    .tab.active{
      border-bottom: 2px solid #3670F5;
      color: #3670F5;
      background-color: #fff;
    }
  }
  .iframe {
    width: 100%;
    height: calc(100% - 33px - 10px);
    border: medium none;
    background-color: #fff;
  }
}
</style>
